import React, { Component } from 'react'
import store, {actionCreator} from '../Store'

export default class Redux extends Component {
    constructor() {
        super();
        this.state = {

        }
    }
    componentDidMount(){
        // 将store中的数据合并到this.state中 页面上的所有数据都从this.state来
        this.setState(store.getState()); // setState需要一个对象 getState返回一个对象
        // 发布订阅模式-store发布数据更新  组件订阅store的数据 每次数据更新组件得能监听到
        this.subFn = store.subscribe(()=>{
            // 这个函数会在每次数据更新后自动执行--数据一变 他就执行
            this.setState(store.getState());
        })
    }
    componentWillUnmount() {
        // 离开页面时取消订阅 取消的方式是再调用一次这个函数
        this.subFn()
    }
    ageAdd() {
        // 修改store中的数据 需要提交action
        // this.$store.dispathc(action)  vuex的写法
        // store.dispatch({type: 'ageAdd'}) // 年龄加一
        store.dispatch(actionCreator.ageAdd()); // 新的方式
    }
    changeAdd() {
        // 搬家到杭州
        // store.dispatch({type: 'changeAdd', val: 'hangzhou'})
        store.dispatch(actionCreator.changeAdd('yueqiu'));// 新的方式
    }
    render() {
        // console.log(store);
        return (
            <div>
                <p>store中的数据： {this.state.add}</p>
                <p>store中的数据： {this.state.age}</p>
                <button onClick={()=>this.ageAdd()}>修改age</button>
                <button onClick={()=>this.changeAdd()}>修改地址</button>
            </div>
        )
    }
}
